<template>
    <div>
      <el-form ref="elForm" size="mini" :model="form" :rules="rules" label-width="120px">
        <el-row>

          <el-col :span="24">
            <el-form-item label="产品类别" prop="type_id">
              <el-select :style="{'width': '100%'}" v-model="form.type_id" clearable placeholder="请选择产品类别">
                <el-option
                  v-for="item in typeList"
                  :key="item.bm_id"
                  :label="item.bm_name"
                  :value="item.bm_id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="产品名称" prop="product_name">
              <el-input v-model="form.product_name" placeholder="请输入产品名称" />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="产品英文名称" prop="product_egname">
              <el-input v-model="form.product_egname" placeholder="请输入产品英文名称" />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="产品图片" prop="product_img">
              <image-upload v-model="form.product_img" @input="getImgUrl"></image-upload>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="产品详情" prop="product_detail">
              <editor :height="250" v-model="form.product_detail"></editor>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer" style="text-align: right;">
        <el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
        <el-button size="mini" @click="cancel">取 消</el-button>
      </div>
    </div>
</template>

<script>
  import { listMenu } from "@/api/base/menu";
  import { addProduct, updateProduct, getProduct } from "@/api/base/product";
  export default {
        name: "productForm",
        props: ['keyValue'],
        data() {
          return{
            menuOptions: [],
            typeList: [],
            form: {
              product_detail: '',
              product_name: '',
              product_egname: '',
              product_img: '',
              type_id: '',
            },
            // 表单校验
            rules: {
              type_id: [
                { required: true, message: "产品类别不能为空", trigger: "change" }
              ],
              product_name: [
                { required: true, message: "产品名称不能为空", trigger: "blur" }
              ],
            }
          }
        },
      mounted() {
          this.getTypeList();
          if(this.keyValue != null) {
            getProduct(this.keyValue).then(res=>{
              this.form = res.data;
            });
          }
      },
      methods:{
          getTypeList() {
            listMenu().then(res=>{
              this.typeList = res.rows;
            })
          },
          getImgUrl(val){

          },
          // 确定
          submitForm(){
            console.log(this.form);
            this.$refs['elForm'].validate((valid) => {
              if (valid) {
                if(this.keyValue == null) {
                  addProduct(this.form).then(res=>{
                    this.commonMsg(res.code);
                  });
                } else {
                  updateProduct(this.form).then(res=>{
                    this.commonMsg(res.code);
                  });
                }
              } else {
                return;
              }
            });
          },
          // 取消
          cancel(){
            this.$emit('cancelForm');
          },
          // 公共提示
          commonMsg(code) {
            if(code == 200) {
              this.$message.success('操作成功.');
              this.$emit('closeDiag');
            } else {
              this.$message.error(res.msg);
            }
          }
        }
    }
</script>

<style scoped>

</style>
